<template>
	<view class="container">
		<view class="example-body">
			<uni-search-bar class="body-2" radius="5" placeholder="请输入搜索的内容" clearButton="auto" cancelButton="none"
				@confirm="search" />
		</view>
		<view class="top">
			<view class="top-1">公开课</view>
			<view class="top-item">
				<view class="book-icon" v-for="(book, index) in books" :key="index" @click="navigateToDetail(book)">
					<image class="images" :src="book.image" mode="aspectFill"></image>
					<text class="book-title">{{ book.title }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				books: [{
						image: '../../static/image/计算机基础.png',
						title: '计算机基础'
					},
					{
						image: '../../static/image/大学英语.png',
						title: '大学英语'
					},
					{
						image: '../../static/image/数学.png',
						title: '高等数学'
					},
					{
						image: '../../static/image/形势与政策.png',
						title: '大学语文'
					}
				],
			};
		},
		methods: {
			navigateToDetail(book) {
				// 使用 uni.navigateTo 跳转到详情页，并传递参数
				uni.navigateTo({
					url: `/pages/detail/detail?title=${encodeURIComponent(book.title)}&images=${encodeURIComponent(book.image)}`
				});
			}
		},
	};
</script>

<style>
	.container {
		background-color: ;
		min-height: 100vh;
	}

	.example-body {
		width: 95%;
		padding: 10px;
		display: flex;
		background-color: #fff;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
	}

	.body-2 {
		flex: 1;
	}

	.top-1 {
		font-size: 20px;
		padding: 10px;
		margin-top: 20px;
	}

	.top-item {
		display: flex;
		justify-content: center;
	}

	.book-icon {
		width: 150px;
		height: 200px;
		margin: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.images {
		width: 70px;
		height: 90px;
		border-radius: 10px;
	}

	.book-title {
		font-size: 14px;
		margin-top: 10px;
		text-align: center;
	}
</style>